<template>
    <hl-page title="我的团队" :hidden-back="true">
        <div class="content" slot="content">
            <div class="cell">
                <label class="cell-title">全部会员</label><span class="right">{{total}}<i class="amds icon-right-arrow"></i></span>
            </div>
            <div class="cell" @click="$router.push({path:'/team/detail',query:{type:5}})">
                <label class="cell-title">区域领导</label><span class="right">{{area}}<i class="amds icon-right-arrow"></i></span>
            </div>
            <div class="cell" @click="$router.push({path:'/team/detail',query:{type:4}})">
                <label class="cell-title">总监</label><span class="right">{{zj}}<i
                    class="amds icon-right-arrow"></i></span>
            </div>
            <div class="cell" @click="$router.push({path:'/team/detail',query:{type:3}})">
                <label class="cell-title">经理</label><span class="right">{{jl}}<i
                    class="amds icon-right-arrow"></i></span>
            </div>
            <div class="cell" @click="$router.push({path:'/team/detail',query:{type:2}})">
                <label class="cell-title">副理</label><span class="right">{{fl}}<i
                    class="amds icon-right-arrow"></i></span>
            </div>
            <div class="cell" @click="$router.push({path:'/team/detail',query:{type:1}})">
                <label class="cell-title">专员</label><span class="right">{{zy}}<i
                    class="amds icon-right-arrow"></i></span>
            </div>
            <div class="cell" @click="$router.push({path:'/team/detail',query:{type:0}})">
                <label class="cell-title">Vip客户</label><span class="right">{{vip}}<i
                    class="amds icon-right-arrow"></i></span>
            </div>
        </div>

        <hl-tabbar slot="tab" :active="active" @tabBarSelect="changeTab"/>
    </hl-page>
</template>

<script>
    import HlPage from "../components/hl-page";
    import HlTabbar from "../components/hl-tabbar";
    import {Url} from "../utils/config";

    export default {
        components: {
            HlTabbar,
            HlPage
        },
        name: "team",
        methods: {
            changeTab(item, index) {
                switch (index) {
                    case 0:
                        this.$router.push('/');
                        break;
                    case 1:
                        this.$router.push('/team');
                        break;
                    case 2:
                        this.$router.push('/help');
                        break;
                    case 3:
                        this.$router.push('/me');
                        break;
                }
            },
            loadTeam() {
                let toast = this.$createToast({
                    txt: '正在加载',
                    time: 0
                });
                toast.show();
                this.$get(Url.teamInfoUrl).then((res) => {
                    this.total = res.data.total;
                    this.area = res.data.area;
                    this.zj = res.data.zj;
                    this.jl = res.data.jl;
                    this.fl = res.data.fl;
                    this.zy = res.data.zy;
                    this.vip = res.data.vip;

                    toast.hide()
                }).catch((error) => {
                    toast.hide()
                })
            }
        },
        mounted() {
            this.loadTeam()
        },
        data() {
            return {
                active: 1,
                total: 0,
                area: 0,
                zj: 0,
                jl: 0,
                fl: 0,
                zy: 0,
                vip: 0
            }
        },
    }
</script>

<style scoped lang="less">
    @import "../assets/theme";

    .content {

        .cell {
            font-size: 28px;
            line-height: 80px;
            height: 80px;
            display: flex;
            align-items: center;
            flex-direction: row;
            border-bottom: solid 1PX #e0e0e0;
            background: #fff;
            &:active {
                background: darken(#fff, 5%);
            }
            .cell-title {
                color: #888888;
                margin-left: 20px;
            }
            .right {
                margin-left: auto;
                margin-right: 20px;
                color: @app-color;
                .amds {
                    font-size: 28px;
                    margin-left: 20px;
                    color: #e0e0e0;
                }
            }
        }
    }
</style>